<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr = [5, 4, 3, 2, 1];
        for (var i = 0; i <= arr.length - 1; i++) { //外部循环管趟数
            for (var j = 0; j <= arr.length - 1 - i; j++) { //里面的循环管 每一趟的交换次数
                // 内部交换2个变量的值 前一个和后一个数组元素相比较
                if (arr[j] < arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);

        // 首先 我们先理解 数组arr.length 这个意思。 就是检测arr数组里面的元素 有多长 这里是5 因为有五个
        // arr[] 这个意思就是数组元素！ 是从0开始的 所以里面有0-4  就是 0 1 2 3 4
        // 外部循环 管的是第几趟的 那么一共要走4趟的 因为5排序弄完了 4弄  然后 3弄 2弄  就四趟了   1的话已经排号啦  所以就是arr.length-1  就是5-1  然后4-1  3-1 2-1 
        // 再里面的那一层for循环 要管每一次的交换次数 第一趟的时候 要交换4次 ; 第二趟 3次; 第三趟 2次 ; 第四趟 1次   所以要用arr,length-1-i
        // arr[j] <arr[j+1] 比如 arr[0] <arr[1]   就是数组里面的5<4 那么 就会执行我for循环里边的下面话
        // var temp = arr[j+1]  arr[j+1]再temp 里面
        // arr[j+1] 在arr[j]里面
        // arr[j+1] = temp  temp 在arr[j+1]里面
        // 因为temo 里面呢 就是空的嘛 我装了arr[j] 所以里面的arr[j]的值 用这个空的 来实现两个交换。
        // 可以想象两个球 人就两只手 那么来一个空的桌面 你就用这个空的桌面 放1 然后一只手接过2  然后1给到另一只手 就交换完啦
    </script>
</head>

<body>
    <!-- 交换两变量
    var num1 = 'pink';
    var num2 = 'yellow';
    var temp;
    temp = num1;
    num1 = num2;
    num2 = temp;
    console.log(num1, num2);
    不懂可以画图 -->
</body>

</html>